<template>
  <div>实时监测
    <el-row>
      <el-col :span="5">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree @node-click="handlerClick2" class="filter-tree" :data="EngData" :props="defaultProps" :filter-node-method="filterNode">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="table">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="tsp" name="tsp">
              <div ref="tsp"></div>
            </el-tab-pane>
            <el-tab-pane label="pm10" name="pm10">
              <div ref="pm10"></div>
            </el-tab-pane>
            <el-tab-pane label="pm2.5" name="pm25">
              <div ref="pm25"></div>
            </el-tab-pane>
            <el-tab-pane label="温度" name="temperature">
              <div ref="temperature"></div>
            </el-tab-pane>
            <el-tab-pane label="湿度" name="humidity">
              <div ref="humidity"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from '@/utils/request';
import { Area } from '@antv/g2plot';
import moment from 'moment';
export default {
  data() {
    return {
      filterText: '',
      params: {
        page: 1,
        pageSize: 100,
      },
      // 实时数据
      tspData: [],
      pm10Data:[],
      pm25Data:[],
      temperatureData:[],
      humidityData:[],

      defaultProps: {
        children: 'children',
        label: 'name',
      },
      activeName: 'second',
      // 树形结构展示数据 
      EngData: [],
      area:null,
    };

  },
  computed: {},
  methods: {
    // 封装tsp折线面积图表函数
    tsploadLine() {
      this.area = new Area(this.$refs.tsp, {
        data: this.tspData,
        xField: 'insert_time',
        yField: 'tsp',
        xAxis: {
          range: [0, 1],
        },
      }),
        this.area.render();
    },
    // 封装pm10折线面积图表函数
    pm10loadLine() {
      this.aaaa = new Area(this.$refs.pm10, {
        data: this.pm10Data,
        xField: 'insert_time',
        yField: 'pm10',
        xAxis: {
          range: [0, 1],
        },
      }),
        this.aaaa.render();
    },
    // 封装pm2.5折线面积图表函数
    pm25loadLine() {
      this.bbbb = new Area(this.$refs.pm25, {
        data: this.pm25Data,
        xField: 'insert_time',
        yField: 'pm25',
        xAxis: {
          range: [0, 1],
        },
      }),
        this.bbbb.render();
    },
    // 封装温度折线面积图表函数
    temperatureloadLine() {
      this.cccc = new Area(this.$refs.temperature, {
        data: this.temperatureData,
        xField: 'insert_time',
        yField: 'temperature',
        xAxis: {
          range: [0, 1],
        },
      }),
        this.cccc.render();
    },
    // 封装湿度折线面积图表函数
    humidityloadLine() {
      this.dddd = new Area(this.$refs.humidity, {
        data: this.humidityData,
        xField: 'insert_time',
        yField: 'humidity',
        xAxis: {
          range: [0, 1],
        },
      }),
        this.dddd.render();
    },
    // 组件点击事件
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 工程设备树点击事件
    handlerClick2(val, event){
      if (!val.children) {
        this.params.device_id = val.id;
        this.params.engineer_id = val.engineer_id;
        this.getNowData();
        this.area.changeData(this.tspData);
        this.aaaa.changeData(this.pm10Data);
        this.bbbb.changeData(this.pm25Data);
        this.cccc.changeData(this.humidityData);
        this.dddd.changeData(this.temperatureData);
      }
    },
    // 分装获取设备实时数据接口函数
    async getNowData() {
      let res = await get('/monitor/pageQuery', this.params);
      console.log(res, '实时数据');
      let temp = [];
      res.data.list.forEach((item, index, arr) => {
        // 由于刻度混乱 将第一条数据值设置为15.4
        arr[0].tsp = 15;
        arr[0].pm10 = 20;
        arr[0].pm25 = 20;
        arr[0].temperature = 20;
        arr[0].humidity = 20;
        item.insert_time = moment(item.insert_time).format('HH:mm');
        // 由于查询数据密度密集 需要将数据处理 每隔10条数据取一条数据
        if (index % 10 == 0) {
          temp.push(arr[index])
        }
      });
      this.tspData = temp;
      this.pm10Data = temp;
      this.pm25Data = temp;
      this.temperatureData = temp;
      this.humidityData = temp;
    },
    // 设备树接口函数
    async getEngDevData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      // console.log(res, '88888');
      this.EngData = res.data;
    },
    filterNode(value, data) {
      // data是树形结构数据 
      if (!value) return true;
      // value输入框输入的值 
      // 返回就是包含输入框关键字的label(节点)  
      return data.name.indexOf(value) !== -1;
    },
  },
  created() {
    this.getEngDevData();
  },
  async mounted() {
    await this.getNowData();
    this.tsploadLine();
    this.pm10loadLine();
    this.pm25loadLine();
    this.temperatureloadLine();
    this.humidityloadLine();
  },
};
</script>
<style scoped>

.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
  border-right: 1px solid #ececec;
  margin-right: 10px;
  position: relative;
}
</style>